<template>
	<view class="canvas-box" @click="clickMap">
		<role class="role" id="roleRef" ref="roleRef" :style="`top: ${styleObj.top};left: ${styleObj.left};`">
		</role>
		<!-- background:#000; -->
		<div :style="`background:#000;position:absolute;top:${item[1]*props.cubeWidth}px;left:${item[0]*props.cubeWidth}px;width:${props.cubeWidth}px;height:${props.cubeWidth}px`"
			v-for="item in props.wallArr" :key="item">
		</div>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		watch
	} from "vue"
	import AStar from "./main.js"
	import role from "../role/role.vue"
	components: {
		role
	}

	let roleRef = ref(null)
	let times = ref(null)
	let arrIndex = ref(0)
	let rolePosition = ref([])
	let styleObj = reactive({
		top: "0rpx",
		left: "0rpx"
	})
	let task = new AStar.Task()
	let emit = defineEmits(["movePosition"])
	
	const props = defineProps({
		wallArr: {
			type: Array,
			default: []
		},
		initPosition: {
			type: Array,
			default: [2, 2]
		},
		cubeWidth: {
			type: Number,
			default: 20
		}
	})

	onMounted(() => {

	})

	watch(props, (newValue, OldValue, onCleanup) => {
		loadingMap(newValue)
		onCleanup(() => {
			console.log("清除副作用");
		});
	})

	const loadingMap = (newValue) => {
		rolePosition.value = [newValue.initPosition[0] * props.cubeWidth,newValue.initPosition[1] * props.cubeWidth]
		styleObj.top = newValue.initPosition[0] * props.cubeWidth + "px"
		styleObj.left = newValue.initPosition[1] * props.cubeWidth + "px"
		if (newValue.wallArr && newValue.wallArr.length != 0) {
			newValue.wallArr.forEach(item => {
				let temp = []
				Object.keys(item).map(key => {
					temp.push(item[key])
				})
				let [x,y] = temp
				task.addWall(x, y)
			})
		}
	}
	const clickMap = (e,cb) => {
		clearInterval(times.value)
		arrIndex.value = 0
		times.value = null
		let x = Number((e.detail.x / props.cubeWidth).toFixed(0));
		let y = Number((e.detail.y / props.cubeWidth).toFixed(0));
		let startY = Number((rolePosition.value[0] / props.cubeWidth).toFixed(0));
		let startX = Number((rolePosition.value[1] / props.cubeWidth).toFixed(0));
		task.setStart(startX, startY)
		task.setEnd(x, y)
		task.findPath()

		times.value = setInterval(() => {
			interValMove(task,cb)
		}, 50)
		
	}
	const interValMove = (task,cb) => {
		if (task.pathSet[arrIndex.value]) {
			let tempY = 0
			let tempX = 0
			tempY = rolePosition.value[0] / props.cubeWidth
			tempX = rolePosition.value[1] / props.cubeWidth
				styleObj.top = task.pathSet[arrIndex.value].y * props.cubeWidth + "px"
				styleObj.left = task.pathSet[arrIndex.value].x * props.cubeWidth + "px"
				rolePosition.value = [Number((task.pathSet[arrIndex.value].y * props.cubeWidth).toFixed(0)), Number((
					task.pathSet[arrIndex.value].x * props.cubeWidth).toFixed(0))]
					emit("movePosition",rolePosition.value)

			arrIndex.value++
		} else {
			clearInterval(times.value)
			times.value = null
			arrIndex.value = 0
			if(cb){
				cb()
			}
		}
	}
	defineExpose({clickMap})
</script>

<style scoped>
	.canvas-box {
		width: 100%;
		height: 100%;
	}

	.role {
		width: 20rpx;
		height: 20rpx;
		background-color: red;
		position: absolute;
	}
</style>